{extend name="index_layout"/}
{block name="main"}
<form class="layui-form" method="post">

    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">基础</li>
            <li>规格</li>
            <li>内容</li>
        </ul>

        <div class="layui-tab-content">

            <div class="layui-tab-item layui-show">
                <div class="layui-form-item">
                    <label class="layui-form-label">分类ID</label>
                    <div class="layui-input-block">
                        <input id="c-company_cate_id" lay-verify="" data-source="admin/company_cate/index"
                               class="selectpage layui-input" name="row[company_cate_id]" type="text" value="{$data.company_cate_id}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                        <input id="c-name" lay-verify="required" class=" layui-input" name="row[name]" type="text"
                               value="{$data.name}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">基础类名称</label>
                    <div class="layui-input-block">
                        <input id="c-type_name" lay-verify="required" class=" layui-input" name="row[type_name]"
                               type="text" value="{$data.type_name}">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">图片</label>
                    <div class="layui-input-block">
                        <div class="layui-col-xs4">
                            <input id="c-image" lay-verify="required" class=" layui-input" size="50" name="row[image]"
                                   type="text" value="{$data.image}">
                        </div>
                        <button type="button" id="faupload-image" class="layui-btn faupload" data-input-id="c-image"
                                data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp"
                                data-multiple="false" data-preview-id="p-image"><i
                                class="layui-icon layui-icon-upload"></i> 上传
                        </button>
                        <button type="button" id="fachoose-image" class="layui-btn fachoose" data-input-id="c-image"
                                data-mimetype="image/*" data-multiple="false"><i class="iconfont icon-other"></i> 选择
                        </button>
                        <ul class="layui-row list-inline plupload-preview" id="p-image"></ul>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <input type="radio" name="row[status]" value="1" title="显示" {if $data.status==1}checked{/if}>
                        <input type="radio" name="row[status]" value="0" title="隐藏" {if $data.status==0}checked{/if}>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-block">
                        <input id="c-sort" lay-verify="required" class=" layui-input" name="row[sort]" type="number"
                               value="{$data.sort}">
                    </div>
                </div>
            </div>
            <div class="layui-tab-item">


                <div class="layui-form-item">
                    <label class="layui-form-label">规格</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-normal" id="add-price">添加规格</button>
                        <table class="layui-table" id="price-table">
                            <thead>
                            <tr>
                                <th>规格</th>
                                <th>价格</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>

            </div>
            <div class="layui-tab-item">
                <div class="layui-form-item">
                    <label class="layui-form-label">内容</label>
                    <dl class="layui-input-block fieldlist" data-name="row[content]" data-id="content">
                        <dd>
                            <button type="button" class="layui-btn btn-append">追加</button>
                        </dd>
                        <textarea name="row[content]" class="layui-textarea layui-hide" cols="30" rows="5">{$data.content}</textarea>
                    </dl>
                </div>


                <script type="text/html" id="contentTpl">
                    <dd class="layui-form-item rules-item">
                        {{# layui.each(d.lists, function(index, item) { }}

                        <input type="text" class="layui-input" name="{{item.name}}[{{item.index}}][key]" placeholder="类型"
                               value="{{item.key|| ''}}"/>
                        <input type="text" class="layui-input" name="{{item.name}}[{{item.index}}][value]" placeholder="金额"
                               value="{{item.value|| ''}}"/>
                        <button type="button" class="layui-btn layui-btn-danger btn-remove layui-btn-xs"><i
                                class="iconfont icon-close"></i></button>
                        <button type="button" class="layui-btn btn-dragsort layui-btn-xs"><i class="iconfont icon-yidong"></i>
                        </button>
                        {{# }); }}
                    </dd>
                </script>
            </div>

        </div>

    </div>
    <div class="layui-form-item layer-footer">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

{/block}
{block name="script"}
<script>
    $(document).ready(function(){
        // 将PHP中存储的省份数据转换为 JavaScript 对象
        var spec = <?php echo $spec; ?>;

        // 渲染已有的spec数据
        var specData = <?php echo $data['spec']; ?>;
        specData.forEach(function(item){
            var newRow = '<tr>' +
                '<td><select class="province-dropdown" multiple name="spec[]"></select></td>' +
                '<td><input type="text" class="layui-input price-input" name="price[]" value="' + item.price + '"></td>' +
                '<td><button type="button" class="layui-btn layui-btn-danger delete-row">删除</button></td>' +
                '</tr>';
            // 添加行到表格中
            $("#price-table tbody").append(newRow);

            // 添加省份数据到下拉框中
            var selectOptions = '';
            spec.forEach(function(province){
                selectOptions += '<option value="' + province.id + '"' + (item.spec_id == province.id ? ' selected' : '') + '>' + province.name + '</option>';
            });
            $('.province-dropdown:last').html(selectOptions);
        });

        // 添加价格按钮点击事件
        $("#add-price").click(function(){
            var newRow = '<tr>' +
                '<td><select class="province-dropdown" multiple name="spec[]"></select></td>' +
                '<td><input type="text" class="layui-input price-input" name="price[]"></td>' +
                '<td><button type="button" class="layui-btn layui-btn-danger delete-row">删除</button></td>' +
                '</tr>';
            // 添加新行
            $("#price-table tbody").append(newRow);

            // 将省份数据添加到最新添加的多选下拉框中
            var selectOptions = '';
            spec.forEach(function(province){
                selectOptions += '<option value="' + province.id + '">' + province.name + '</option>';
            });
            $('.province-dropdown:last').html(selectOptions);

            // 使用 layui 的 select 组件渲染多选下拉框
            layui.use('form', function(){
                var form = layui.form;
                form.render('select');
            });
        });

        // 删除按钮点击事件
        $(document).on('click', '.delete-row', function(){
            $(this).closest('tr').remove();
        });
    });
</script>

<script type="text/javascript">
    layui.use(['yznForm', 'element'], function () {
        var yznForm = layui.yznForm;
        var element = layui.element;
        yznForm.bindevent($("form.layui-form"));
    });
</script>
{/block}